<template>
  <a-modal
    :title="currTitle"
    :visible="visible"
    :closable="false"
    centered
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    width="600px"
  >
    <a-transfer
      :data-source="mockData"
      :list-style="{
        width: '250px',
        height: '400px',
      }"
      show-search
      :filter-option="filterOption"
      :target-keys="targetKeys"
      :render="item => item.title"
      @change="handleChange"
      @search="handleSearch"
      :locale="{ itemUnit: '个已选', itemsUnit: '项已选', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }"

    />
  </a-modal>
</template>
<script>
export default {
  name: 'SelectPopup',
  props:{
    title:{
      type:String,
      default:"需求部门主管选择",
      required:false
    },
    closable:{
      type:Boolean,
      default:false,
      required:false
    },
  },
  data() {
    return {
      currTitle:this.title,
      ModalText: 'Content of the modal',
      visible: true,
      confirmLoading: false,
       mockData: [],
      targetKeys: [],
    };
  },
  mounted() {
    this.getMock();
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData;
      this.targetKeys = targetKeys;
    },
    filterOption(inputValue, option) {
      return option.description.indexOf(inputValue) > -1;
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys;
    },
    handleSearch(dir, value) {
      console.log('search:', dir, value);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary{
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected{
  display: none;
}
/deep/ .ant-modal-content{
  border-radius: 40px;
}
/deep/ .ant-modal-title,/deep/ .ant-modal-footer{
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary{
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header{
  border-radius: 40px 40px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%,#1158c9 100%);
}
/deep/ .ant-modal-title{
  color: #fff;
}
</style>